Online Code Editor & Live Preview

Write HTML, CSS, and JavaScript code with real-time preview. Perfect for prototyping, learning, and testing web components.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Live Preview</title>
</head>
<body>
    <div class="container">
        <h1>Hello World!</h1>
        <p>Start coding to see live preview</p>
        <button onclick="changeColor()">Click me!</button>
    </div>
</body>
</html>

CSS

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    min-height: 100vh;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 50px 20px;
}

h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

button {
    background: rgba(255,255,255,0.2);
    border: 2px solid white;
    color: white;
    padding: 12px 24px;
    font-size: 1rem;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
}

button:hover {
    background: white;
    color: #667eea;
    transform: translateY(-2px);
}

JavaScript

function changeColor() {
    const colors = [
        'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
        'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
        'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
        'linear-gradient(135deg, #fa709a 0%, #fee140 100%)'
    ];
    
    const randomColor = colors[Math.floor(Math.random() * colors.length)];
    document.body.style.background = randomColor;
    
    // Add a fun animation
    document.querySelector('.container').style.transform = 'scale(1.05)';
    setTimeout(() => {
        document.querySelector('.container').style.transform = 'scale(1)';
    }, 200);
}

// Add some interactivity
document.addEventListener('DOMContentLoaded', function() {
    console.log('Live preview is ready!');
    
    // Add click effect to the page
    document.addEventListener('click', function(e) {
        if (e.target.tagName !== 'BUTTON') {
            const ripple = document.createElement('div');
            ripple.style.cssText = `
                position: absolute;
                border-radius: 50%;
                background: rgba(255,255,255,0.3);
                transform: scale(0);
                animation: ripple 0.6s linear;
                pointer-events: none;
                z-index: 1000;
            `;
            
            const size = 60;
            ripple.style.width = ripple.style.height = size + 'px';
            ripple.style.left = (e.clientX - size / 2) + 'px';
            ripple.style.top = (e.clientY - size / 2) + 'px';
            
            document.body.appendChild(ripple);
            
            setTimeout(() => {
                ripple.remove();
            }, 600);
        }
    });
});

// Add CSS for ripple animation
const style = document.createElement('style');
style.textContent = `
    @keyframes ripple {
        to {
            transform: scale(4);
            opacity: 0;
        }
    }
`;
document.head.appendChild(style);

Live Preview

Features

Real-time Preview

See your changes instantly as you type. No need to manually refresh or run commands.

Syntax Highlighting

Clean, readable code with proper indentation and monospace font for better development experience.

Responsive Design

Works perfectly on desktop, tablet, and mobile devices with adaptive layout.

Export Code

Copy individual sections or export your complete project with one click.